Skip to content

Add focusable prop to horizontal ScrollView for keyboard accessibility#734

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/fix-horizontal-scrollview-access
Draft

Add focusable prop to horizontal ScrollView for keyboard accessibility#734
Copilot wants to merge 3 commits intomainfrom
copilot/fix-horizontal-scrollview-access

Conversation

Copy link
Contributor

Copilot AI commented Oct 14, 2025 •
edited
Loading

Description

Fixes Bug 59184466: Users were unable to access the 'A Horizontal Scrollview' scroll bar using keyboard navigation, preventing keyboard-only users from interacting with the horizontal ScrollView example.

Changes

Added focusable={true} prop to the "A horizontal ScrollView" example in the NewArch version of ScrollViewExample.tsx. This enables native keyboard navigation support in React Native Windows.

Impact

With this change:

  • Users can now Tab to focus the horizontal ScrollView
  • Once focused, Left/Right arrow keys can be used to scroll the content horizontally
  • This follows standard Windows UX patterns where focusable ScrollViewers automatically support keyboard navigation without requiring custom event handlers

Technical Details

The fix leverages React Native Windows' native ScrollViewer keyboard support. By adding focusable={true}, the ScrollView becomes keyboard accessible and automatically handles arrow key navigation through the Windows platform layer.

Example usage:

<ScrollView style={{height: 40}} horizontal={true} focusable={true}>
  <Text>Long horizontal content...</Text>
</ScrollView>

Accessibility

This change addresses MAS 2.1.1 – Keyboard accessibility requirements, ensuring that users who rely on keyboard navigation can fully interact with horizontal ScrollView content.

Files Changed

  • NewArch/src/examples/ScrollViewExample.tsx (2 lines)

Total: 2 lines changed in 1 file

Co-authored-by: @anupriya13

Fixes #651

Original prompt

This section details on the original issue you should resolve

<issue_title>Bug 59184466: [React Native Gallery Preview]: User is unable to access the 'A Horizontal Scrollview' scroll bar using keyboard.</issue_title>
<issue_description>Build Details:
OS Version: 24H2
OS Build: 26100.5074
App: React Native Gallery Preview
AT Used: Keyboard

Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to the 'Expand menu' button and invoke it.
Navigate to ‘All samples’ button present in left navigation pane and invoke it.
Navigate to ‘Scrollview’ button present under “Scrolling” group and invoke it.
Now try to access the 'A Horizontal Scrollview' scroll bar using keyboard and observe the behavior
Actual Result:​
User is unable to access the 'A Horizontal Scrollview' scroll bar using keyboard

Note: User is able to access the 'A Horizontal Scrollview' scroll bar button using mouse

Expected Result:
'A Horizontal Scrollview' scroll bar should be accessible using keyboard.

User Impact:
Users who rely on keyboard might feel difficult to access 'A Horizontal Scrollview' scroll bar.

MAS Reference Link: MAS 2.1.1 – Keyboard

Trap ID: 2.1 - Physical Challenge

“Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.”</issue_description>

Comments on the Issue (you are @copilot in this section)

@protikbiswas100 https://github.com//pull/660 @protikbiswas100 Andrew commented "Most of window's scrollbars do not get focus when you tab. -- This seems wrong? You should be able to scroll using keyboard when focus is within the scrollview already." @anupriya13 @protikbiswas100 For this we just need to add a prop in horizontal=true

Fixes #651

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Microsoft Reviewers: Open in CodeFlow

@anupriya13
Add focusable prop to horizontal ScrollView for keyboard accessibility
eb40d98 
Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix keyboard access issue for horizontal scrollview Add focusable prop to horizontal ScrollView for keyboard accessibility Oct 14, 2025
Copilot AI requested a review from anupriya13 October 14, 2025 04:46
anupriya13
anupriya13 reviewed Oct 14, 2025
View reviewed changes
@anupriya13
Remove changes from src folder, keep only NewArch changes
b8b6195 
Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com>
Copilot AI requested a review from anupriya13 October 14, 2025 04:55
@anupriya13
Copy link
Contributor

anupriya13 commented Oct 14, 2025

/azp run

@azure-pipelines
Copy link

azure-pipelines bot commented Oct 14, 2025

Azure Pipelines successfully started running 1 pipeline(s), but failed to run 1 pipeline(s).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@protikbiswas100 protikbiswas100 protikbiswas100 approved these changes

@anupriya13 anupriya13 Awaiting requested review from anupriya13

Assignees

@anupriya13 anupriya13

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug 59184466: [React Native Gallery Preview]: User is unable to access the 'A Horizontal Scrollview' scroll bar using keyboard.

3 participants

@anupriya13 @protikbiswas100